<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-card-border ant-pro-card-contain-card ant-pro-card-ghost"
    >
      <div
        class="ant-pro-card-body ant-pro-card-body-direction-column"
      >
        <div
          class="ant-pro-card-col"
          style="padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              colSpan - 24
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col ant-pro-card-col-24"
          style="padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              colSpan - 12
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col ant-pro-card-col-24"
          style="padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              colSpan - 8
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col ant-pro-card-col-0"
          style="padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              colSpan - 0
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-pro-card ant-pro-card-border ant-pro-card-contain-card"
      style="margin-block-start: 8px;"
    >
      <div
        class="ant-pro-card-header"
      >
        <div
          class="ant-pro-card-title"
        >
          24 grids
        </div>
      </div>
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-card-col ant-pro-card-col-12"
          style="padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              colSpan-12
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col ant-pro-card-col-6"
          style="padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              colSpan-6
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col ant-pro-card-col-6"
          style="padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              colSpan-6
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-pro-card ant-pro-card-border ant-pro-card-contain-card ant-pro-card-ghost"
      style="margin-block-start: 8px;"
    >
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-card-col"
          style="width: 200px; flex-shrink: 0; padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              colSpan - 200px
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
          style="padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              Auto
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ant-pro-card ant-pro-card-border ant-pro-card-contain-card ant-pro-card-ghost"
      style="margin-block-start: 8px;"
    >
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-card-col"
          style="padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body ant-pro-card-body-center"
            >
              Auto
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
          style="width: 30%; flex-shrink: 0; padding-inline-end: 4px; padding-inline-start: 4px;"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              colSpan - 30%
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProCard ColSpan 配置 Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            direction
          </strong>
          : 排列方向，'column' 表示垂直排列
        </li>
        <li>
          <strong>
            ghost
          </strong>
          : 是否使用幽灵模式，无背景和边框
        </li>
        <li>
          <strong>
            gutter
          </strong>
          : 间距设置，支持响应式配置
        </li>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题
        </li>
        <li>
          <strong>
            style
          </strong>
          : 卡片样式对象
        </li>
      </ul>
      <h4>
        子卡片配置：
      </h4>
      <ul>
        <li>
          <strong>
            colSpan
          </strong>
          : 列跨度，支持多种配置方式
        </li>
        <li>
          <strong>
            layout
          </strong>
          : 布局方式，'center' 表示居中对齐
        </li>
        <li>
          <strong>
            variant
          </strong>
          : 卡片变体样式，'outlined' 表示带边框
        </li>
      </ul>
      <h4>
        ColSpan 配置方式：
      </h4>
      <ul>
        <li>
          <strong>
            数字值
          </strong>
          : colSpan=12 使用 24 栅格系统
        </li>
        <li>
          <strong>
            响应式对象
          </strong>
          : 根据屏幕尺寸设置不同的列数
        </li>
        <li>
          <strong>
            像素值
          </strong>
          : colSpan="200px" 固定宽度
        </li>
        <li>
          <strong>
            百分比
          </strong>
          : colSpan="30%" 相对宽度
        </li>
        <li>
          <strong>
            零值
          </strong>
          : colSpan=0 隐藏卡片
        </li>
      </ul>
      <h4>
        响应式断点配置：
      </h4>
      <ul>
        <li>
          <strong>
            xs
          </strong>
          : 超小屏幕 (
          <576px
            li=""
          >
            <strong>
              sm
            </strong>
            : 小屏幕 (≥576px)
            <li>
              <strong>
                md
              </strong>
              : 中等屏幕 (≥768px)
            </li>
            <li>
              <strong>
                lg
              </strong>
              : 大屏幕 (≥992px)
            </li>
            <li>
              <strong>
                xl
              </strong>
              : 超大屏幕 (≥1200px)
            </li>
            <li>
              <strong>
                xxl
              </strong>
              : 超超大屏幕 (≥1600px)
            </li>
            <h4>
              布局特点：
            </h4>
            <ul>
              <li>
                <strong>
                  24 栅格系统
                </strong>
                : 使用数字值时，总列数应该为 24
              </li>
              <li>
                <strong>
                  自动宽度
                </strong>
                : 不设置 colSpan 时自动填充剩余空间
              </li>
              <li>
                <strong>
                  固定宽度
                </strong>
                : 使用像素值时宽度固定不变
              </li>
              <li>
                <strong>
                  相对宽度
                </strong>
                : 使用百分比时宽度随容器变化
              </li>
              <li>
                <strong>
                  隐藏卡片
                </strong>
                : colSpan=0 时卡片完全隐藏
              </li>
            </ul>
            <h4>
              Ghost 模式特点：
            </h4>
            <ul>
              <li>
                <strong>
                  无背景
                </strong>
                : 卡片没有背景色
              </li>
              <li>
                <strong>
                  无边框
                </strong>
                : 卡片没有边框
              </li>
              <li>
                <strong>
                  透明效果
                </strong>
                : 适合作为布局容器
              </li>
            </ul>
            <h4>
              使用场景：
            </h4>
            <ul>
              <li>
                <strong>
                  响应式布局
                </strong>
                : 构建响应式的卡片网格
              </li>
              <li>
                <strong>
                  固定布局
                </strong>
                : 使用固定宽度构建布局
              </li>
              <li>
                <strong>
                  弹性布局
                </strong>
                : 使用百分比构建弹性布局
              </li>
              <li>
                <strong>
                  条件显示
                </strong>
                : 使用 colSpan=0 条件隐藏卡片
              </li>
            </ul>
            <h4>
              最佳实践：
            </h4>
            <ul>
              <li>
                <strong>
                  栅格计算
                </strong>
                : 使用数字值时确保总列数为 24
              </li>
              <li>
                <strong>
                  响应式设计
                </strong>
                : 在不同断点下测试布局效果
              </li>
              <li>
                <strong>
                  混合使用
                </strong>
                : 结合多种配置方式构建复杂布局
              </li>
            </ul>
          </576px>
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>